<template>
	<div>
    <!-- <div class="main_operation">
        <div class="operation_left" >
            <a-button v-if="isAdmin == 1 || routerShow($route,'group_add')" class="mr10" type="primary" @click="addBtn">添加</a-button>
        </div>
        <div class="operation_right">
        </div>
    </div> -->
    <div class="main">
        <a-table  :pagination="false" bordered :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data"
          :rowKey="record => record.id"
          :scroll="{x: 1200, y: 500 }"
        >
        <template slot="action" slot-scope="text, record">
          <template v-if="isAdmin == 1">
            <a-button size="small" v-if="record.grade_name_c == '' && routerShow($route,'group_add')" class="mr5" type="primary" @click="itemAdd(record)">{{ record.grade == 1 ? '添加代理' : '添加公司' }}</a-button>
            <a-button v-if="routerShow($route,'group_update')" size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button>
            <a-button v-if="routerShow($route,'group_delete') && record.grade_name_a == ''" size="small" type="danger" @click="delBtn(record)">删除</a-button>
          </template>
          <template v-if="isAdmin == 2">
            <a-button size="small" v-if="record.grade == 2 && routerShow($route,'group_add')" class="mr5" type="primary" @click="itemAdd(record)">{{ record.grade == 1 ? '添加代理' : '添加公司' }}</a-button>
            <a-button size="small" v-if="record.grade == 3 && routerShow($route,'group_update')" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button>
            <a-button size="small" v-if="record.grade == 3 && routerShow($route,'group_delete') && record.grade_name_a == ''" type="danger" @click="delBtn(record)">删除</a-button>
          </template>
          <template v-if="isAdmin == 3"></template>
        </template>
      </a-table>
      <div class="pageBox">
        <a-pagination
          :total="dataLists.total"
          :showTotal="total => `共 ${total} 条数据`"
          :pageSize="dataLists.per_page"
          :defaultCurrent="1"
          @change="pageChange"
        />
      </div>
    </div>
    <!-- 添加编辑 -->
    <a-modal
      :maskClosable="false"
    	:destroyOnClose="true" :title="titleModel" :width="600"
    	v-model="visible" :confirmLoading="confirmLoading"
    	@ok="handleOk" @cancel="handleCancel">
    	<a-form>
    		<a-form-item required label="分组名称:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
    			<a-input v-model="formItem.name" placeholder="请输入栏目名称" />
    		</a-form-item>
        <a-form-item v-if="selectShow" label="所属分组:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
          <template v-if="selectMainShow">
            <a-cascader
            	v-model="groupId"
            	changeOnSelect
            	:fieldNames="{ label: 'name', value: 'id', children: 'parent' }"
            	@change="onChange"
            	:options="groupData" placeholder="请选择设备分组" />
          </template>
          <template v-else>
            {{groupName}}
          </template>
        </a-form-item>
        <a-form-item label="地址:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
          <a-input v-model="formItem.address" placeholder="请输入公司地址" />
        </a-form-item>
    		<a-form-item label="分组描述:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
    			<a-textarea v-model="formItem.describe" placeholder="请输入分组描述" :autosize="{ minRows: 3, maxRows: 6 }" />
    		</a-form-item>
    	</a-form>
    </a-modal>
	</div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  import Vue from "vue";
  import { USER } from "@/store/mutation-types";
    export default {
        name: "Grouping",
		data(){
		    return {
          userData:'',// 权限
          /* 通用模块 */
            //列表
          tableLoad: false,//列表loading状态
          formList:{          //列表信息
          	page: 1
          },
          selectedRowKeys: [],//勾选的id
          /* 通用模块end */

          /* 添加编辑 */
          titleModel: '',//标题
          visible: false,//窗口显示隐藏
          confirmLoading: false,//按钮loading状态
          formItem:{
          	name: '',
          	// parent_id: '',
          	describe: '',
          },
          /* 添加编辑end */

          /* 详情 */
          detaiVisible: false,//窗口开关

          /* 分类选择 */
          selectShow: true, // 分组选择显示隐藏
          selectMainShow: true, // 分组选择内容显示隐藏
          groupId: [],  //分组信息列表
          groupName: '',
		    }
		},
    computed: {
    	...mapState({
    		Fields: state => state.group.Fields,
    		dataLists: state => state.group.dataLists,
    		requestCode: state => state.group.requestCode,
        groupData: state => state.group.groupData,
      }),
      isAdmin() {
          if (this.userData.role_grade === 1) {
              return 1;
          } else if (this.userData.role_grade === 2)  {
              return 2;
          } else if (this.userData.role_grade === 3) {
              return 3;
          }
      }
    },
		mounted() {
        this.userData = Vue.ls.get(USER);
		    this.changeData()
		},
		methods: {
      ...mapActions({
      	getLists: 'group/getLists',     //列表
      	dataAdd: 'group/dataAdd',        //添加
      	dataEdit: 'group/dataEdit',      //编辑
      	dataDel: 'group/dataDel',        //删除
      	groupAll: 'group/groupAll',        //设备分组信息
      }),

      /* 通用模块 */
        // 勾选
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys
      },
        // 重新获取列表数据
      changeData(){
        this.tableLoad = true
        setTimeout(()=> {
          this.getLists(this.formList)
          this.groupAll()
          this.tableLoad = false
        }, 800);
      },
        // 页码
      pageChange(page) {
      	this.formList.page = page;
      	this.getLists(this.formList)
      },
      /* 通用模块end */

      /* 添加编辑 */
      	// 添加
      addBtn() {
        this.selectShow = false //隐藏选择
      	this.titleModel = '添加公司分组'
      	this.formItem = {
          name: '',
          // parent_id: '',
          describe: '',
      	},
      	this.visible = true
      },
      // 添加子分组
      itemAdd(item){
        console.log(item);
        this.groupName = item.name
        this.formItem = {
          name: '',
          parent_id: item.id,
          describe: '',
        }
        this.selectShow = true //隐藏选择
        this.selectMainShow = false //显示什么内容
        if(item.grade == 1) {
          this.titleModel = '添加代理分组'
        } else if(item.grade == 2) {
          this.titleModel = '添加公司分组'
        }
        this.visible = true
      },
      	// 编辑
      editBtn(item) {
        console.log(item);
        console.log(this.groupData);
        if(item.grade == 1) {
          this.titleModel = '编辑代理分组'
        } else if(item.grade == 2) {
          this.titleModel = '编辑公司分组'
        }
        this.selectMainShow = true //显示什么内容
        if(item.grade == "1") {     /* 一级分组不可编辑上级分组 */
          this.formItem = {
            name: item.name,
            describe: item.describe,
          }
          this.selectShow = false //隐藏选择
        } else {
          this.formItem = {
            name: item.name,
            parent_id: Number(item.parent_id),
            describe: item.describe,
          }
          this.selectShow = false //分组选择隐藏选择
        }
        this.formItem.id = item.id
      	this.visible = true
      },
      	// 窗口确定
      handleOk() {
        console.log(this.formItem);
      	this.confirmLoading = true;
      	if(this.titleModel == '添加代理分组' || this.titleModel == '添加公司分组') {
      		this.formList.page = 1;
      		this.dataAdd(this.formItem)
      	} else {
      		this.dataEdit(this.formItem)
      	}
      	setTimeout(() => {
      		// console.log(this.requestCode);
      		if(this.requestCode === 0) {
      			this.visible = false;
      			this.changeData()
      		}
      		this.confirmLoading = false;
      	}, 1000);
      },
      	// 窗口取消
      handleCancel() {
      	this.visible = false
      },
      /* 添加编辑end */

      /* 删除 */
      delBtn(item) {
        console.log(item);
      	let _this = this
      	this.$confirm({
      		title: `您确定要删除 ${item.name} 吗?`,
      		content: `删除后将不可恢复,请仔细核对!`,
      		okText: '确定',
      		okType: 'danger',
      		cancelText: '取消',
      		onOk() {
      			_this.dataDel(item.id)
      			_this.changeData()
      		},
      	});
      },
      // 分组选择
      onChange(value) {
      	this.formItem.parent_id = value[value.length-1]
      },
		}
  }
</script>

<style scoped>

</style>